import {
  Col,
  Form,
  Input,
  InputNumber,
  Modal,
  Row,
  Select,
  Space,
  Table,
  Tag
} from "antd"
import type { TableProps } from "antd"
import React, { useState } from "react"

type DataType = chrome.declarativeNetRequest.Rule

const columns: TableProps<DataType>["columns"] = [
  // {
  //   title: "id",
  //   dataIndex: "id"
  // },
  {
    title: "priority",
    dataIndex: "priority"
  },
  {
    title: "action",
    dataIndex: "action",
    render: () => "-"
  },
  {
    title: "condition",
    dataIndex: "condition",
    render: () => "-"
  }
]

const typeOptions = [
  "block",
  "redirect",
  "allow",
  "upgradeScheme",
  "modifyHeaders",
  "allowAllRequests"
].map((item) => ({ label: item, value: item }))

const App: React.FC = () => {
  const [form] = Form.useForm()

  const [isModalOpen, setIsModalOpen] = useState(false)
  const [data, setData] = useState<DataType[]>([
    {
      id: 1,
      priority: 1,
      action: [
        {
          type: "modifyHeaders"
        }
      ],
      condition: []
    }
  ])

  columns.push({
    title: "operation",
    key: "operation",
    render: (_, record, index) => (
      <Space size="middle">
        <a onClick={handleEdit}>Edit </a>
        <a onClick={() => handleDel(index)}>Delete</a>
      </Space>
    )
  })

  const handleEdit = () => {
    setIsModalOpen(true)
  }
  const handleDel = (index) => {
    const newData = data.slice()
    newData.splice(index, 1)
    setData(newData)
  }

  const handleOk = () => {
    setIsModalOpen(false)
  }

  const handleCancel = () => {
    setIsModalOpen(false)
  }

  const layout = {
    // labelCol: {
    //   span: 4
    // },
    // wrapperCol: {
    //   span: 8
    // }
  }
  const onFinish = (values) => {
    console.log(values)
  }

  const ModalCoponent = (
    <Modal
      title="chrome setting"
      open={isModalOpen}
      onOk={handleOk}
      onCancel={handleCancel}>
      <Form
        {...layout}
        form={form}
        name="form"
        onFinish={onFinish}
        style={{
          maxWidth: 600
        }}>
        <Row>
          <Col span={12}>
            <Form.Item
              name="priority"
              label="priority"
              rules={[
                {
                  required: true
                }
              ]}>
              <InputNumber min={1} max={100} defaultValue={1} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name={["action", "type"]}
              label="Type"
              rules={[
                {
                  required: true
                }
              ]}>
              <Select
                // mode="multiple"
                allowClear
                style={{ width: "100%" }}
                placeholder="Please select"
                options={typeOptions}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  )

  return (
    <>
      <Table
        rowKey={"id"}
        columns={columns}
        dataSource={data}
        pagination={false}
      />
      {ModalCoponent}
    </>
  )
}

export default App
